<template>
    <div class="login">
        <vantHeader title="登录"></vantHeader>
        <div class="logo">
            <!-- <van-image round width="1rem" height="1rem" src="@/assets/img/logo.png" /> -->
        </div>

        <!-- @submit="onSubmit"接收数据 -->
        <van-form @submit="onSubmit">

            <van-field v-model="username" name="username" label="用户名" autocomplete="off" placeholder="请输入用户名或邮箱"
                :rules="[{ required: true, message: '' }]" />

            <van-field v-model="password" name="password" label="密码" autocomplete="new-password" type="password"
                placeholder="请输入密码" :rules="[{ required: true, message: '' }]" />

            <div class="subBtns">
                <van-button round block type="danger" native-type="submit">登录</van-button>
                <van-button @click="goRegister" class="no-border" round block type="primary" plain>注册</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
// import { login } from "../../api/user";
import { mapState } from 'vuex'

export default {
    name: 'login',

    data() {
        return {
            username: '',
            password: '',
            formData: {
                username: '',
                password: '',
            },

        };
    },
    // computed和watch的区别
    // https://blog.csdn.net/a_dragon_/article/details/124066108
    // 计算属性在某些场景下（此示例），要比侦听器代码精简。
    computed: {
        // 三个点代表扩展运算符，是ES6的语法
        // 意思是： 如果id存在，不为undefined，就用后面的对象填充进form对象中
        // 使用了vuex
        ...mapState(['userInfo', 'isLogin'])
    },

    // watch 监视、监听，在此处定义监听器
    // 作用：监视data中的数据变化
    watch: {
        // 侦听器以函数的形式定义，函数名称就是监视的数据的名称，参数就是数据变化后的新值
        '$store.state.isLogin': function (newVal, oldVal) {
            if (newVal) {
                this.$router.push('/my');
            }

        }
    },
    methods: {
        // 跳转注册
        goRegister(e) {
            e.preventDefault();
            this.$router.push('/register');

        },
        // async onSubmit(value) {
        // console.log(value);
        // this.login(value)
        onSubmit(values) {
            this.login(values)
        },
        async login(formData) {
            console.log(formData);
            // return this.$http.post('login', {
            //     params: {
            //         username: formData.username,
            //         password: formData.password,
            //     }
            // })
            // return this.$http.post('user/login', formData)
            const res = await this.$http.post('v1/user/login', formData)
            this.loading = false;
            console.log(res);
            if (res.data.statusCode === 200) {
                console.log(res);
                this.$notify({ type: 'success', message: '登录成功', duration: 500 });
                // 存储服务器给的token和用户信息
                localStorage.setItem('token', res.data.data.token);
                localStorage.setItem('userInfo', res.data.data.userInfo);
                // 更新状态
                this.$store.commit('updateUserInfo',  res.data.data.userInfo);
                // 跳转
                this.$router.push('/my');
            } else {
                // vant的全局消息通知
                this.$notify({
                    type: 'danger',
                    message: '登录失败' + res.data.message,
                    duration: 1000,
                });
                // console.log(res.data.message);
            }
        },
        // login(data) {
        //     let url = 'user/login';
        //     return this.$http.post(url, data);
        // },
        // 跳转回上一个页面
        onClickLeft() {
            this.$router.back();
        },

    },
};
</script>

<style lang="less" scoped>
.login {
    height: 100vh;
    background-color: #fff;

    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 3rem;
    }

    .subBtns {
        margin: 0.32rem 0;

        .no-border {
            border: none;
            color: #999;
        }

        .van-button {
            margin-bottom: 0.1rem;
        }
    }
}
</style>
